<!--
 * @Description: Element.prototype HTMLElement.prototype
 * @Author: zzj
 * @Date: 2021-09-14 09:20:22
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-14 10:17:22
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element.prototype HTMLElement.prototype</title>
</head>
<body>
    <div id="a1"></div>
    <ul id="u1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div id="a2">1111</div>
    <div id="a3"></div>
    <div id="a4"></div>
    <div id="a5"></div>
    <script>
        var a1 = document.getElementById("a1");
        //获取HTML元素属性的方式
        console.log(a1.id);
        console.log(a1.getAttribute("id"));   //取得自定义属性
        //设置HTML元素属性的方式
        a1.className = "red";
        a1.setAttribute("class","blue");   //设置属性
        //删除HTML元素属性
        a1.removeAttribute("class");
        console.log(a1.attributes);  //包含所有属性的类数组对象
        var attrs = a1.attributes;
        console.log(attrs.getNamedItem("id").nodeValue);  //没有nodeValue时，获取到的为还为集合，使用nodeValue才能直接获取到值
        // removeNamedItem(name)  从列表中删除nodeName属性等于name的值
        var a = document.createAttribute("class");
        a.nodeValue = "red";
        a1.attributes.setNamedItem(a);//添加属性的第三种方式，可以一次性全部获取


        var p = document.createElement("p");
        var t = document.createTextNode("zzj学习element");
        p.appendChild(t);
        a1.appendChild(p);
        //$(#"a1").append("<p>zzj学习element</p>")

        a1.style.backgroundColor = "yellow";
        a1.onclick = function(){
            alert("hello");  //浏览器自带弹窗，还有一种模态窗
        }

        var u1 = document.getElementById("u1");
        var childs = u1.children;  //返回NodeList对象，但是该对象中仅包含Element对象
        console.log(childs);
        u1.firstElementChild.style.backgroundColor = "red";
        u1.lastElementChild.style.backgroundColor = "green";
        u1.nextElementSibling.style.fontSize = "12px";  //下一个兄弟元素节点
        u1.previousElementSibling.style.fontSize = "24px";  //上一个兄弟元素节点

        //获取子元素节点的数量
        console.log(u1.childElementCount);  //5
        console.log(u1.children.length);  //5 
        console.log(u1.childNodes.length);  //11  包含文本节点(空白节点)

        var a3 = document.getElementById("a3");
        a3.innerHTML = "<p>innerHTML</p>";  //可以插入文字，也可以插入html代码,使用时需要注意安全性问题：如果给了一些不是HTML标签的内容，可能会造成项目页面的混乱。数据是服务器返回的内容，一定要先检测在使用！
        var a4 = document.getElementById("a4");
        a4.innerText = "<p>innerText</p>";   //字符串原封不动的解析出来,去除回车和换行(去除的是/n)
        var a5 = document.getElementById("a5");
        a5.textContent = "<p>textContent</p>";  //字符串原封不动的解析出来,不去除空格和回车
    </script>
</body>
</html>